<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameHub - 游戏购物平台 | 学号-姓名-实验4</title>
    <style>
        /* CSS3样式 */
        :root {
            --primary-color: #6c5ce7;
            --secondary-color: #a29bfe;
            --dark-color: #2d3436;
            --light-color: #f5f6fa;
            --success-color: #00b894;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
        }
        
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 1.5rem;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        nav ul li a:hover {
            color: var(--secondary-color);
        }
        
        .search-bar {
            display: flex;
            margin: 1rem 0;
        }
        
        .search-bar input {
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            width: 300px;
        }
        
        .search-bar button {
            padding: 0.5rem 1rem;
            background-color: var(--dark-color);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        
        .user-actions a {
            color: white;
            text-decoration: none;
            margin-left: 1rem;
        }
        
        /* 轮播图样式 */
        .slider {
            width: 100%;
            height: 400px;
            overflow: hidden;
            position: relative;
        }
        
        .slides {
            display: flex;
            width: 300%;
            height: 100%;
            transition: transform 0.5s ease;
        }
        
        .slide {
            width: 33.33%;
            height: 100%;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slider-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        
        .slider-control {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }
        
        .slider-control.active {
            background-color: white;
        }
        
        /* 商品分类 */
        .categories {
            padding: 2rem;
            background-color: white;
            margin: 1rem 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .section-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--dark-color);
        }
        
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .category-item {
            background-color: var(--light-color);
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
            min-width: 120px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .category-item:hover {
            background-color: var(--secondary-color);
            color: white;
            transform: translateY(-5px);
        }
        
        /* 热门游戏 */
        .featured-games {
            padding: 2rem;
            background-color: white;
            margin: 1rem 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .game-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        
        .game-card {
            background-color: var(--light-color);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .game-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .game-image {
            height: 200px;
            overflow: hidden;
        }
        
        .game-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .game-card:hover .game-image img {
            transform: scale(1.1);
        }
        
        .game-info {
            padding: 1rem;
        }
        
        .game-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        
        .game-price {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .game-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #5649c0;
        }
        
        .btn-secondary {
            background-color: var(--dark-color);
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #1a1e1f;
        }
        
        /* 登录/注册模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .modal-title {
            font-size: 1.5rem;
            color: var(--dark-color);
        }
        
        .close-btn {
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--dark-color);
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-actions {
            margin-top: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .switch-form {
            color: var(--primary-color);
            cursor: pointer;
            text-decoration: underline;
        }
        
        /* 页脚 */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem;
            margin-top: 2rem;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }
        
        .footer-section h3 {
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 0.5rem;
        }
        
        .footer-section ul li a {
            color: #ddd;
            text-decoration: none;
        }
        
        .footer-section ul li a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            nav ul {
                margin-top: 1rem;
            }
            
            .search-bar {
                width: 100%;
                margin: 1rem 0;
            }
            
            .search-bar input {
                width: 100%;
            }
            
            .slider {
                height: 250px;
            }
            
            .game-list {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }

        cart-count {
            display: none;
            background-color: var(--success-color);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            margin-left: 5px;
        }



        /* 商品详情模态框样式 */
.product-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.product-modal-content {
    background-color: white;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.product-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

.product-modal-title {
    font-size: 1.5rem;
    margin: 0;
    color: var(--dark-color);
}

.close-modal {
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--dark-color);
    background: none;
    border: none;
    padding: 0 0.5rem;
}

.product-modal-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .product-modal-body {
        flex-direction: column;
    }
}

.product-image-container {
    flex: 1;
    margin-bottom: 1.5rem;
}

.product-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.product-details {
    flex: 2;
    padding-left: 0;
}

@media (min-width: 768px) {
    .product-modal-body {
        flex-direction: row;
    }
    
    .product-details {
        padding-left: 1.5rem;
    }
}

.product-price {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 1rem 0;
}

.product-description {
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.product-features {
    margin-bottom: 1.5rem;
}

.product-features h4 {
    margin-bottom: 0.5rem;
}

.product-features ul {
    padding-left: 1.5rem;
}

.product-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.product-actions .btn {
    flex: 1;
}






.search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            width: 300px;
            max-height: 400px;
            overflow-y: auto;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: none;
        }
        
        .search-suggestions.show {
            display: block;
        }
        
        .search-suggestion-item {
            padding: 0.8rem;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
        }
        
        .search-suggestion-item:hover {
            background-color: #f5f6fa;
        }
        
        .search-suggestion-item .game-title {
            font-weight: bold;
            margin-bottom: 0.3rem;
        }
        
        .search-suggestion-item .game-category {
            font-size: 0.8rem;
            color: #666;
        }
        
        .search-container {
            position: relative;
            width: 300px;
        }
        
        .search-no-results {
            padding: 1rem;
            text-align: center;
            color: #666;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .search-container {
                width: 100%;
            }
            
            .search-suggestions {
                width: 100%;
            }
        }



    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="logo">GameHub</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">游戏商城</a></li>
                <li><a href="#">特惠活动</a></li>
                <li><a href="#">新游预告</a></li>
                <li><a href="#">社区论坛</a></li>
            </ul>
        </nav>
        <div class="user-actions">
            <a href="#" id="login-btn">登录</a>
            <a href="#" id="register-btn">注册</a>
            
            <a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
        </div>
    </header>

    <!-- 搜索栏 -->
  <div class="container">
        <div class="search-container">
            <div class="search-bar">
                <input type="text" id="search-input" placeholder="搜索游戏名称、类型或发行商...">
                <button id="search-btn"><i class="fas fa-search"></i> 搜索</button>
            </div>
            <div class="search-suggestions" id="search-suggestions">
                <!-- 搜索建议内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    

    <!-- 轮播图 -->
    <div class="slider">
        <div class="slides">
            <div class="slide">
                <img src="images/9.png" alt="热门游戏">
            </div>
            <div class="slide">
                <img src="images/10.png" alt="限时特惠">
            </div>
            <div class="slide">
                <img src="images/11.png" alt="新游首发">
            </div>
        </div>
        <div class="slider-controls">
            <div class="slider-control active"></div>
            <div class="slider-control"></div>
            <div class="slider-control"></div>
        </div>
    </div>

    <!-- 主要内容 -->
    <main class="container">
        <!-- 游戏分类 -->
        <section class="categories">
            <h2 class="section-title">游戏分类</h2>
            <div class="category-list">
                <div class="category-item">动作冒险</div>
                <div class="category-item">角色扮演</div>
                <div class="category-item">策略模拟</div>
                <div class="category-item">射击游戏</div>
                <div class="category-item">体育竞技</div>
                <div class="category-item">休闲益智</div>
                <div class="category-item">独立游戏</div>
                <div class="category-item">VR游戏</div>
            </div>
        </section>

        <!-- 热门游戏 -->
        <section class="featured-games">
            <h2 class="section-title">热门游戏</h2>
            <div class="game-list">
                <!-- 游戏卡片1 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/1.png" alt="游戏1">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">幻想世界：失落王国</h3>
                        <div class="game-price">¥199</div>
                        <div class="game-rating">★★★★☆ (4.5)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片2 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/2.png" alt="游戏2">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">星际争霸</h3>
                        <div class="game-price">¥249 <span class="original-price"></span></div>
                        <div class="game-rating">★★★★★ (4.8)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片3 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/3.png" alt="游戏3">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">极限竞速：地平线</h3>
                        <div class="game-price">¥179</div>
                        <div class="game-rating">★★★★☆ (4.3)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片4 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/4.png" alt="游戏4">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">刺客信条-枭雄</h3>
                        <div class="game-price">¥159</div>
                        <div class="game-rating">★★★★☆ (4.6)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新游推荐 -->
        <section class="featured-games">
            <h2 class="section-title">新游推荐</h2>
            <div class="game-list">
                <!-- 游戏卡片5 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/5.png" alt="游戏5">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">赛博朋克2077</h3>
                        <div class="game-price">¥299</div>
                        <div class="game-rating">★★★★★ (4.9)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片6 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/6.png" alt="游戏6">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">荒野大镖客2：救赎</h3>
                        <div class="game-price">¥349</div>
                        <div class="game-rating">★★★★★ (5.0)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片7 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/7.png" alt="游戏7">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">最终幻想XVI</h3>
                        <div class="game-price">¥279</div>
                        <div class="game-rating">★★★★☆ (4.7)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏卡片8 -->
                <div class="game-card">
                    <div class="game-image">
                        <img src="images/8.png" alt="游戏8">
                    </div>
                    <div class="game-info">
                        <h3 class="game-title">巫师3：狂猎</h3>
                        <div class="game-price">¥259</div>
                        <div class="game-rating">★★★★★ (4.8)</div>
                        <div class="game-actions">
                            <button class="btn btn-primary">加入购物车</button>
                            <button class="btn btn-secondary">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 登录模态框 -->
    <div class="modal" id="login-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">用户登录</h3>
                <span class="close-btn">&times;</span>
            </div>
            <form id="login-form">
                <div class="form-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" placeholder="请输入密码" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">登录</button>
                    <span class="switch-form" id="show-register">没有账号？立即注册</span>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal" id="register-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">用户注册</h3>
                <span class="close-btn">&times;</span>
            </div>
            <form id="register-form">
                <div class="form-group">
                    <label for="register-username">用户名</label>
                    <input type="text" id="register-username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="register-email">电子邮箱</label>
                    <input type="email" id="register-email" placeholder="请输入电子邮箱" required>
                </div>
                <div class="form-group">
                    <label for="register-password">密码</label>
                    <input type="password" id="register-password" placeholder="请输入密码" required>
                </div>
                <div class="form-group">
                    <label for="register-confirm-password">确认密码</label>
                    <input type="password" id="register-confirm-password" placeholder="请再次输入密码" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">注册</button>
                    <span class="switch-form" id="show-login">已有账号？立即登录</span>
                </div>
            </form>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">联系方式</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>客户服务</h3>
                <ul>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">退换政策</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>法律信息</h3>
                <ul>
                    <li><a href="#">用户协议</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">版权声明</a></li>
                    <li><a href="#">知识产权</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <ul>
                    <li><a href="#">微信公众号</a></li>
                    <li><a href="#">微博</a></li>
                    <li><a href="#">B站</a></li>
                    <li><a href="#">抖音</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>© 2023 GameHub游戏购物平台. 版权所有. 学号：23215220331 姓名：黄毅</p>
        </div>
    </footer>

    <!-- 商品详情模态框 -->
<div class="product-modal" id="productModal">
    <div class="product-modal-content">
        <div class="product-modal-header">
            <h3 class="product-modal-title" id="modalProductTitle">商品标题</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="product-modal-body">
            <div class="product-image-container">
                <img src="" alt="商品图片" class="product-image" id="modalProductImage">
            </div>
            <div class="product-details">
                <div class="product-price" id="modalProductPrice">¥0.00</div>
                <div class="product-rating">★★★★☆ (4.5)</div>
                <div class="product-description" id="modalProductDescription">
                    这里是商品的详细描述内容，将在这里显示游戏的详细介绍、特色玩法、系统要求等信息。
                </div>
                <div class="product-features">
                    <h4>游戏特色：</h4>
                    <ul>
                        <li>开放世界自由探索</li>
                        <li>丰富的剧情任务</li>
                        <li>精美的画面表现</li>
                        <li>多人联机合作</li>
                    </ul>
                </div>
                <div class="product-actions">
                    <button class="btn btn-primary" id="modalAddToCart">加入购物车</button>
                    <button class="btn btn-secondary">立即购买</button>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- JavaScript -->
    <script>
        // 轮播图功能
        let currentSlide = 0;
        const slides = document.querySelector('.slides');
        const slideControls = document.querySelectorAll('.slider-control');
        
        function showSlide(n) {
            currentSlide = (n + 3) % 3;
            slides.style.transform = `translateX(-${currentSlide * 33.33}%)`;
            
            // 更新控制点状态
            slideControls.forEach((control, index) => {
                if (index === currentSlide) {
                    control.classList.add('active');
                } else {
                    control.classList.remove('active');
                }
            });
        }
        
        // 自动轮播
        setInterval(() => {
            showSlide(currentSlide + 1);
        }, 5000);
        
        // 点击控制点切换
        slideControls.forEach((control, index) => {
            control.addEventListener('click', () => {
                showSlide(index);
            });
        });
        
        // 登录/注册模态框功能
        const loginBtn = document.getElementById('login-btn');
        const registerBtn = document.getElementById('register-btn');
        const loginModal = document.getElementById('login-modal');
        const registerModal = document.getElementById('register-modal');
        const showRegister = document.getElementById('show-register');
        const showLogin = document.getElementById('show-login');
        const closeBtns = document.querySelectorAll('.close-btn');
        
        // 显示登录模态框
        loginBtn.addEventListener('click', (e) => {
            e.preventDefault();
            loginModal.style.display = 'flex';
        });
        
        // 显示注册模态框
        registerBtn.addEventListener('click', (e) => {
            e.preventDefault();
            registerModal.style.display = 'flex';
        });
        
        // 切换到注册表单
        showRegister.addEventListener('click', (e) => {
            e.preventDefault();
            loginModal.style.display = 'none';
            registerModal.style.display = 'flex';
        });
        
        // 切换到登录表单
        showLogin.addEventListener('click', (e) => {
            e.preventDefault();
            registerModal.style.display = 'none';
            loginModal.style.display = 'flex';
        });
        
        // 关闭模态框
        closeBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                loginModal.style.display = 'none';
                registerModal.style.display = 'none';
            });
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === loginModal) {
                loginModal.style.display = 'none';
            }
            if (e.target === registerModal) {
                registerModal.style.display = 'none';
            }
        });
        
        // 表单提交
        document.getElementById('login-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            
            // 这里应该有实际的登录验证逻辑
            console.log('登录信息:', { username, password });
            alert('登录成功！');
            loginModal.style.display = 'none';
        });
        
        document.getElementById('register-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('register-username').value;
            const email = document.getElementById('register-email').value;
            const password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('register-confirm-password').value;
            
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }
            
            // 这里应该有实际的注册逻辑
            console.log('注册信息:', { username, email, password });
            alert('注册成功！');
            registerModal.style.display = 'none';
        });
        
        // 商品卡片点击事件
        document.querySelectorAll('.game-card .btn-secondary').forEach(btn => {
            btn.addEventListener('click', () => {
                // 这里应该有跳转到商品详情页的逻辑
                alert('即将跳转到商品详情页');
            });
        });
        
      
          // 加入购物车功能
        document.querySelectorAll('.game-card .btn-primary').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const gameCard = e.target.closest('.game-card');
                const gameTitle = gameCard.querySelector('.game-title').textContent;
                const gamePrice = gameCard.querySelector('.game-price').textContent;
                
                // 这里应该有实际的加入购物车逻辑
                console.log('添加到购物车:', { title: gameTitle, price: gamePrice });
                alert(`已将 ${gameTitle} 添加到购物车`);
            });
        });


               // 购物车功能
        document.addEventListener('DOMContentLoaded', function() {
            // 为每个游戏卡片添加唯一的ID
            const gameCards = document.querySelectorAll('.game-card');
            gameCards.forEach((card, index) => {
                card.dataset.id = 'game-' + (index + 1);
            });

            // 更新购物车数量显示
            function updateCartCount() {
                const cart = JSON.parse(localStorage.getItem('gamehub-cart'))|| [];
                const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
                const cartCounts = document.querySelectorAll('.cart-count');
                
                cartCounts.forEach(count => {
                    count.textContent = totalItems;
                    count.style.display = totalItems > 0 ? 'inline-block' : 'none';
                });
            }

            // 初始化购物车数量
            updateCartCount();

            // 加入购物车按钮事件
            document.querySelectorAll('.game-card .btn-primary').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const gameCard = this.closest('.game-card');
                    const game = {
                        id: gameCard.dataset.id,
                        title: gameCard.querySelector('.game-title').textContent,
                        price: parseFloat(gameCard.querySelector('.game-price').textContent.replace('¥', '')),
                        image: gameCard.querySelector('.game-image img').src,
                        quantity: 1
                    };

                    // 获取现有购物车
                    let cart = JSON.parse(localStorage.getItem('gamehub-cart')) || [];
                    
                    // 检查是否已存在该商品
                    const existingItem = cart.find(item => item.id === game.id);
                    if (existingItem) {
                        existingItem.quantity += 1;
                    } else {
                        cart.push(game);
                    }

                    // 保存回localStorage
                    localStorage.setItem('gamehub-cart', JSON.stringify(cart));
                    
                    // 更新购物车数量显示
                    updateCartCount();
                    
                    alert(`已将 ${game.title} 添加到购物车`);
                });
            });

            // 更新购物车链接显示数量
            const cartLinks = document.querySelectorAll('.user-actions a[href="cart.html"]');
            cartLinks.forEach(link => {
                link.innerHTML = '<i class="fas fa-shopping-cart"></i> 购物车 <span class="cart-count"></span>';
                updateCartCount();
            });
        });


        // 商品详情数据 - 实际项目中可以从服务器获取
    const gameDetails = {
        'game-1': {
            title: '幻想世界：失落王国',
            price: 199,
            image: 'images/1.png',
            description: '《幻想世界：失落王国》是一款史诗级的开放世界角色扮演游戏。在这个广阔的幻想大陆上，玩家将扮演一位被选中的英雄，探索失落的古代文明，解开王国衰落的谜团。游戏拥有丰富的剧情分支、多样的角色培养系统和令人惊叹的画面表现。',
            features: [
                '超过100小时的游戏内容',
                '完全自由的开放世界',
                '深度的角色定制系统',
                '动态天气和昼夜循环',
                '支持多人合作模式'
            ]
        },
        'game-2': {
            title: '星际争霸',
            price: 249,
            image: 'images/2.png',
            description: '《星际争霸》是经典RTS游戏的全新续作，带来了革命性的游戏体验。指挥三个独特种族在浩瀚的银河系中争夺霸权。全新的引擎打造，支持4K分辨率，改进了单位AI和路径寻找系统，使大规模战斗更加流畅。',
            features: [
                '三大独特种族，各具特色',
                '全新的战役剧情',
                '改进的多人匹配系统',
                '支持观战和回放功能',
                '强大的地图编辑器'
            ]
        },
        'game-3': {
    title: '极限竞速：地平线',
    price: 179,
    image: 'images/3.png',
    description: '《极限竞速：地平线》是微软旗下最受欢迎的开放世界赛车游戏系列最新作。游戏设定在风景如画的地中海沿岸，提供超过500辆授权车辆和自由的驾驶体验。',
    features: [
        '超过500辆真实授权车辆',
        '动态天气和四季变化',
        '支持4K/60FPS和光线追踪',
        '自定义赛道和涂装系统',
        '跨平台联机对战'
    ]
},

'game-4': {
    title: '刺客信条-枭雄',
    price: 159,
    image: 'images/4.png',
    description: '《刺客信条-枭雄》是一款以潜行暗杀为核心的动作冒险游戏。玩家将扮演一名复仇的刺客，在中世纪风格的开放城市中执行各种暗杀任务。',
    features: [
        '高度自由的潜行系统',
        '动态的AI敌人行为',
        '多种暗杀方式和武器',
        '开放式的任务完成方式',
        '支持VR模式'
    ]
},

'game-5': {
    title: '赛博朋克2077',
    price: 299,
    image: 'images/5.png',
    description: '《赛博朋克2077》是CD Projekt Red经典赛博朋克RPG的完全重制版本，采用最新引擎打造。玩家将进入夜之城，扮演雇佣兵V，体验高度自由的开放世界、丰富的剧情选择和震撼的视觉效果。',
    features: [
        '完全重制的画面和光照系统',
        '新增可探索区域和支线任务',
        '改进的战斗和驾驶体验',
        '支持光线追踪和DLSS 3.0',
        '全新的武器和义体系统'
    ]
},

'game-6': {
    title: '荒野大镖客2：救赎',
    price: 349,
    image: 'images/6/png',
    description: '《荒野大镖客2：救赎》是Rockstar西部题材开放世界游戏的最新作，背景设定在美国西部的黄金时代。玩家将扮演一名亡命之徒，在广袤的西部世界中生存、抢劫和冒险。',
    features: [
        '史上最大的开放世界地图',
        '动态生态系统和野生动物',
        '真实的枪械和骑马系统',
        '深度的荣誉值系统',
        '支持多人线上模式'
    ]
},

'game-7': {
    title: '最终幻想XVI',
    price: 279,
    image: 'images/7.png',
    description: '《最终幻想XVI》是Square Enix经典RPG系列的最新正统续作，采用全新的战斗系统和史诗级剧情。游戏讲述了关于水晶、召唤兽和王国战争的壮丽故事。',
    features: [
        '实时战斗系统（非回合制）',
        '震撼的召唤兽大战',
        '超过50小时的主线剧情',
        '支持日语/英语全程语音',
        '4K HDR画面'
    ]
},

'game-8': {
    title: '巫师3：狂猎',
    price: 259,
    image: 'images/8.png',
    description: '《巫师3：狂猎》是CD Projekt Red《巫师》系列的最新作，延续了杰洛特的故事。本作采用全新引擎，提供更庞大的开放世界和更深入的RPG系统。',
    features: [
        '全新的猎魔人学派系统',
        '动态的剧情选择系统',
        '改进的剑术和法印战斗',
        '支持MOD和玩家创作内容',
        '次世代画面技术'
    ]
},
    };

    // 初始化模态框
    const productModal = document.getElementById('productModal');
    const modalProductTitle = document.getElementById('modalProductTitle');
    const modalProductImage = document.getElementById('modalProductImage');
    const modalProductPrice = document.getElementById('modalProductPrice');
    const modalProductDescription = document.getElementById('modalProductDescription');
    const modalAddToCart = document.getElementById('modalAddToCart');
    let currentProductId = null;

    // 查看详情按钮点击事件
    document.querySelectorAll('.game-card .btn-secondary').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const gameCard = this.closest('.game-card');
            const productId = gameCard.dataset.id;
            showProductModal(productId);
        });
    });

    // 显示商品详情模态框
    function showProductModal(productId) {
        const product = gameDetails[productId] || {
            title: document.querySelector(`.game-card[data-id="${productId}"] .game-title`).textContent,
            price: parseFloat(document.querySelector(`.game-card[data-id="${productId}"] .game-price`).textContent.replace('¥', '')),
            image: document.querySelector(`.game-card[data-id="${productId}"] .game-image img`).src,
            description: '暂无详细描述',
            features: ['暂无特色信息']
        };

        currentProductId = productId;
        modalProductTitle.textContent = product.title;
        modalProductPrice.textContent = `¥${product.price.toFixed(2)}`;
        modalProductImage.src = product.image;
        modalProductImage.alt = product.title;
        modalProductDescription.textContent = product.description;
        
        // 更新特色列表
        const featuresList = document.querySelector('.product-features ul');
        featuresList.innerHTML = product.features.map(f => `<li>${f}</li>`).join('');
        
        // 显示模态框
        productModal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    // 关闭模态框
    document.querySelector('.close-modal').addEventListener('click', closeModal);
    productModal.addEventListener('click', function(e) {
        if (e.target === productModal) {
            closeModal();
        }
    });

    function closeModal() {
        productModal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    // 模态框中的加入购物车按钮
    modalAddToCart.addEventListener('click', function() {
        if (!currentProductId) return;
        
        const gameCard = document.querySelector(`.game-card[data-id="${currentProductId}"]`);
        const game = {
            id: currentProductId,
            title: gameCard.querySelector('.game-title').textContent,
            price: parseFloat(gameCard.querySelector('.game-price').textContent.replace('¥', '')),
            image: gameCard.querySelector('.game-image img').src,
            quantity: 1
        };

        // 获取现有购物车
        let cart = JSON.parse(localStorage.getItem('gamehub-cart')) || [];
        
        // 检查是否已存在该商品
        const existingItem = cart.find(item => item.id === game.id);
        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            cart.push(game);
        }

        // 保存回localStorage
        localStorage.setItem('gamehub-cart', JSON.stringify(cart));
        
        // 更新购物车数量显示
        updateCartCount();
        
        alert(`已将 ${game.title} 添加到购物车`);
        closeModal();
    });

    // 按ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && productModal.style.display === 'flex') {
            closeModal();
        }
    });




    // 搜索功能实现
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const searchSuggestions = document.getElementById('search-suggestions');
            
            // 游戏数据 - 实际项目中应该从服务器获取
            const games = [
                {
                    id: 'game-1',
                    title: '幻想世界：失落王国',
                    category: '角色扮演',
                    price: 199,
                    image: 'images/1.png',
                    description: '《幻想世界：失落王国》是一款史诗级的开放世界角色扮演游戏。'
                },
                {
                    id: 'game-2',
                    title: '星际争霸',
                    category: '策略模拟',
                    price: 249,
                    image: 'images/2.png',
                    description: '《星际争霸》是经典RTS游戏的全新续作，带来了革命性的游戏体验。'
                },
                {
                    id: 'game-3',
                    title: '极限竞速：地平线',
                    category: '体育竞技',
                    price: 179,
                    image: 'images/3.png',
                    description: '《极限竞速：地平线》是微软旗下最受欢迎的开放世界赛车游戏系列最新作。'
                },
                {
                    id: 'game-4',
                    title: '刺客信条-枭雄',
                    category: '动作冒险',
                    price: 159,
                    image: 'images/4.png',
                    description: '《刺客信条-枭雄》是一款以潜行暗杀为核心的动作冒险游戏。'
                },
                {
                    id: 'game-5',
                    title: '赛博朋克2077',
                    category: '角色扮演',
                    price: 299,
                    image: 'images/5.png',
                    description: '《赛博朋克2077》是CD Projekt Red经典赛博朋克RPG的完全重制版本。'
                },
                {
                    id: 'game-6',
                    title: '荒野大镖客2：救赎',
                    category: '动作冒险',
                    price: 349,
                    image: 'images/6.png',
                    description: '《荒野大镖客2：救赎》是Rockstar西部题材开放世界游戏的最新作。'
                },
                {
                    id: 'game-7',
                    title: '最终幻想XVI',
                    category: '角色扮演',
                    price: 279,
                    image: 'images/7.png',
                    description: '《最终幻想XVI》是Square Enix经典RPG系列的最新正统续作。'
                },
                {
                    id: 'game-8',
                    title: '巫师3：狂猎',
                    category: '角色扮演',
                    price: 259,
                    image: 'images/8.png',
                    description: '《巫师3：狂猎》是CD Projekt Red《巫师》系列的最新作。'
                }
            ];
            
            // 搜索函数
            function searchGames(query) {
                if (!query.trim()) return [];
                
                const lowerQuery = query.toLowerCase();
                return games.filter(game => 
                    game.title.toLowerCase().includes(lowerQuery) ||
                    game.category.toLowerCase().includes(lowerQuery) ||
                    game.description.toLowerCase().includes(lowerQuery)
                );
            }
            
            // 显示搜索结果
            function displaySearchResults(results) {
                if (results.length === 0) {
                    searchSuggestions.innerHTML = '<div class="search-no-results">没有找到匹配的游戏</div>';
                    return;
                }
                
                searchSuggestions.innerHTML = results.map(game => `
                    <div class="search-suggestion-item" data-id="${game.id}">
                        <div class="game-title">${game.title}</div>
                        <div class="game-category">${game.category}</div>
                    </div>
                `).join('');
            }
            
            // 输入事件处理
            searchInput.addEventListener('input', function() {
                const query = this.value;
                if (query.length > 0) {
                    const results = searchGames(query);
                    displaySearchResults(results);
                    searchSuggestions.classList.add('show');
                } else {
                    searchSuggestions.classList.remove('show');
                }
            });
            
     

            // 搜索按钮点击事件
searchBtn.addEventListener('click', function() {
    const query = searchInput.value.trim();
    if (query) {
        // 跳转到搜索结果页并传递搜索词
        window.location.href = `search.html?q=${encodeURIComponent(query)}`;
    }
});

// 回车键搜索
searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        const query = searchInput.value.trim();
        if (query) {
            // 跳转到搜索结果页并传递搜索词
            window.location.href = `search.html?q=${encodeURIComponent(query)}`;
        }
    }
});




            // 点击搜索建议项
            searchSuggestions.addEventListener('click', function(e) {
                const suggestionItem = e.target.closest('.search-suggestion-item');
                if (suggestionItem) {
                    const gameId = suggestionItem.dataset.id;
                    searchInput.value = '';
                    searchSuggestions.classList.remove('show');
                    showProductModal(gameId);
                }
            });
            
            // 点击页面其他区域关闭搜索建议
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.search-container')) {
                    searchSuggestions.classList.remove('show');
                }
            });
            
            // 按回车键搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchBtn.click();
                }
            });
        });



    </script>
</body>
</html>